<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Education</title>
    <!-- 从外部引入pyecharts样式、脚本-->
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
     <!-- 从外部引入Boostrap样式 、脚本-->
     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- 按钮和筛选框的样式 -->
     <style>
  input{font-family: "微软雅黑";
  margin:auto 0;
  background: #ddd;
  font-size: 18px;
  height: 40px;
  width：40px;
  color: black;
  text-align: center;
  border: 1px lightskyblue solid;
  border-radius: 5px;
}
select{
  font-family: "微软雅黑";
  margin:auto 0;
  background: #ddd;
  width: 249px;
  height: 40px;
  font-size: 18px;
  color: black;
  text-align: center;
  border: 1px lightskyblue solid;
  border-radius: 5px;
  }

option{
  color: black;
  background: whitesmoke;
  line-height: 20px;
  }

select:focus{
  border: 2px #A6E1EC solid;
  box-shadow: 0 0 5px 1px lightgray;
  }
option:hover{
  background: pink;
  }

</style>
</head>

<body>
<!-- 页头文字框 -->
<div class="panel panel-default">
	<div class="panel-heading" style="text-align:center;background-color:#392d6c;">
    <h1 style="color:white;">主题：教育经费及收入差距对教育需求造成的影响</h1><br>
    </div>
    <div class="panel-body" style="margin-left:30px;">
        <h4>项目背景</h4>
        <p>随着我国社会经济的不断发展，民众对教育需求的增长和市场力量的发展，私人教育投入在教育总经费中所占比重不断上升。同时，随着人群之间的收入差距拉大以及家庭个性化、多元化的教育需求，不同家庭背景的学生在校内和校外享受到的教育机会和教育资源开始分化，由此可能造成新的教育不公平。因此，为了对全国的教育投入有一个全面的把握，不仅需要政府和学校等教育机构的教育经费数据，也需要知道家庭对子女教育的投入。</p>
        <a style="color:#392d6c;font:normal 20px/30px 'MicroSoft YaHei';" href="{{url_for('index')}}">点击此处查看详情</a>
        <h4>数据来源：</h4>
    <ul>
        <li>艾瑞网</li>
        <li>中国国家统计局</li>
        <li>世界银行</li>
        <li>北京大学中国教育财政科学研究所</li>
        <li>CHFS</li>
    </ul>
        <h4>数据查询</h4>
    <p>（请按顺序查询数据）</p>
     <!-- 数据查询 -->
        <form method="POST" action="/data" >
    <select  name="the_form_selected">
        {% for choice in choice_available %}
            <option value="{{ choice }}">{{ choice }}</option>
        {% endfor %}
    </select>
    <input value='查询' type='SUBMIT'>
<br>
</form>
<div><h3 class="text-success" class="lead" style="text-align: center;">{{ the_title }}</h3></div>
    </div>
</div>
<br>
<div style="width: 1000px;margin:0 auto;font-size: larger;">
    <br><p>{{ the_word }}</p>
</div>
{% block body %}

{% endblock %}

<br>
<div style="margin-left: 300px;">
{{ the_res|safe }}
</div>
<br><br>
<div style="margin-left:300px;">
{{ the_plot | safe }}
</div>

<br><br><br>
</body>
</html>